{template 'header'}
<style type="text/css">.chapter-loader .sk-fading-circle {
    width:40px;
    height:40px;
    position:relative;
}
a{
	text-decoration:none;
}
.chapter-loader .sk-fading-circle .sk-circle {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}
.chapter-loader .sk-fading-circle .sk-circle:before {
    content:'';
    display:block;
    margin:0 auto;
    width:15%;
    height:15%;
    background-color:#fff;
    border-radius:100%;
    -webkit-animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;
    -webkit-animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;
    animation:sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.chapter-loader .sk-fading-circle .sk-circle2 {
    -webkit-transform:rotate(30deg);
    -webkit-transform:rotate(30deg);
    -ms-transform:rotate(30deg);
    transform:rotate(30deg);
}
.chapter-loader .sk-fading-circle .sk-circle3 {
    -webkit-transform:rotate(60deg);
    -webkit-transform:rotate(60deg);
    -ms-transform:rotate(60deg);
    transform:rotate(60deg);
}
.chapter-loader .sk-fading-circle .sk-circle4 {
    -webkit-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
}
.chapter-loader .sk-fading-circle .sk-circle5 {
    -webkit-transform:rotate(120deg);
    -webkit-transform:rotate(120deg);
    -ms-transform:rotate(120deg);
    transform:rotate(120deg);
}
.chapter-loader .sk-fading-circle .sk-circle6 {
    -webkit-transform:rotate(150deg);
    -webkit-transform:rotate(150deg);
    -ms-transform:rotate(150deg);
    transform:rotate(150deg);
}
.chapter-loader .sk-fading-circle .sk-circle7 {
    -webkit-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    transform:rotate(180deg);
}
.chapter-loader .sk-fading-circle .sk-circle8 {
    -webkit-transform:rotate(210deg);
    -webkit-transform:rotate(210deg);
    -ms-transform:rotate(210deg);
    transform:rotate(210deg);
}
.chapter-loader .sk-fading-circle .sk-circle9 {
    -webkit-transform:rotate(240deg);
    -webkit-transform:rotate(240deg);
    -ms-transform:rotate(240deg);
    transform:rotate(240deg);
}
.chapter-loader .sk-fading-circle .sk-circle10 {
    -webkit-transform:rotate(270deg);
    -webkit-transform:rotate(270deg);
    -ms-transform:rotate(270deg);
    transform:rotate(270deg);
}
.chapter-loader .sk-fading-circle .sk-circle11 {
    -webkit-transform:rotate(300deg);
    -webkit-transform:rotate(300deg);
    -ms-transform:rotate(300deg);
    transform:rotate(300deg);
}
.chapter-loader .sk-fading-circle .sk-circle12 {
    -webkit-transform:rotate(330deg);
    -webkit-transform:rotate(330deg);
    -ms-transform:rotate(330deg);
    transform:rotate(330deg);
}
.chapter-loader .sk-fading-circle .sk-circle2:before {
    -webkit-animation-delay:-1.1s;
    -webkit-animation-delay:-1.1s;
    animation-delay:-1.1s;
}
.chapter-loader .sk-fading-circle .sk-circle3:before {
    -webkit-animation-delay:-1s;
    -webkit-animation-delay:-1s;
    animation-delay:-1s;
}
.chapter-loader .sk-fading-circle .sk-circle4:before {
    -webkit-animation-delay:-0.9s;
    -webkit-animation-delay:-0.9s;
    animation-delay:-0.9s;
}
.chapter-loader .sk-fading-circle .sk-circle5:before {
    -webkit-animation-delay:-0.8s;
    -webkit-animation-delay:-0.8s;
    animation-delay:-0.8s;
}
.chapter-loader .sk-fading-circle .sk-circle6:before {
    -webkit-animation-delay:-0.7s;
    -webkit-animation-delay:-0.7s;
    animation-delay:-0.7s;
}
.chapter-loader .sk-fading-circle .sk-circle7:before {
    -webkit-animation-delay:-0.6s;
    -webkit-animation-delay:-0.6s;
    animation-delay:-0.6s;
}
.chapter-loader .sk-fading-circle .sk-circle8:before {
    -webkit-animation-delay:-0.5s;
    -webkit-animation-delay:-0.5s;
    animation-delay:-0.5s;
}
.chapter-loader .sk-fading-circle .sk-circle9:before {
    -webkit-animation-delay:-0.4s;
    -webkit-animation-delay:-0.4s;
    animation-delay:-0.4s;
}
.chapter-loader .sk-fading-circle .sk-circle10:before {
    -webkit-animation-delay:-0.3s;
    -webkit-animation-delay:-0.3s;
    animation-delay:-0.3s;
}
.chapter-loader .sk-fading-circle .sk-circle11:before {
    -webkit-animation-delay:-0.2s;
    -webkit-animation-delay:-0.2s;
    animation-delay:-0.2s;
}
.chapter-loader .sk-fading-circle .sk-circle12:before {
    -webkit-animation-delay:-0.1s;
    -webkit-animation-delay:-0.1s;
    animation-delay:-0.1s;
}
@-webkit-keyframes sk-circleFadeDelay {
    0%, 39%, 100% {
        opacity:0;
    }
    40% {
        opacity:1;
    }
}
@keyframes sk-circleFadeDelay {
    0%, 39%, 100% {
        opacity:0;
    }
    40% {
        opacity:1;
    }
}
.chapter-page .g-skeleton {
    max-width:480px;
}
.chapter-page .schedule {
    z-index:1;
}
.chapter-page .schedule .schedule-bar {
    position:fixed;
    background:#ff000d;
    color:#fff;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    font-size:12px;
    height:32px;
    padding-left:10px;
    border-top-left-radius:16px;
    border-bottom-left-radius:16px;
    box-shadow:1px 2px 17px 0px rgba(255, 0, 22, 0.2);
    right:-47px;
    z-index:1;
    width:135px;
    -webkit-animation:read-page-schedule 1s 1s 1;
    animation:read-page-schedule 1s 1s 1;
    -webkit-transition:all 1s;
    transition:all 1s;
}
.chapter-page .schedule .schedule-bar.cannot-schedule {
    -webkit-animation:read-page-cannot-schedule 1s 1s 1;
    animation:read-page-cannot-schedule 1s 1s 1;
    right:-40px;
    width:165px;
}
.chapter-page .schedule .schedule-bar.can-schedule::after {
    content:'';
    position:absolute;
    width:4px;
    height:4px;
    background:#fff;
    left:77px;
    top:10px;
    border-radius:100%;
}
.chapter-page .chapter-growthstart-dialog {
    color:#979797;
}
.chapter-page .chapter-growthstart-dialog .g-modal .avatar {
    position:absolute;
    left:0;
    right:0;
    top:-32px;
}
.chapter-page .chapter-growthstart-dialog .g-modal .avatar img {
    border:4px #fff solid;
}
.chapter-page .chapter-growthstart-dialog .g-modal .content {
    padding:0.15rem 0.35rem;
}
.chapter-page .chapter-growthstart-dialog .g-modal img {
    width:60px;
    height:60px;
    border-radius:100%;
    overflow:hidden;
}
.chapter-page .chapter-growthstart-dialog .g-modal .name {
    margin-bottom:15px;
    font-size:14px;
}
.chapter-page .chapter-growthstart-dialog .g-modal p {
    line-height:29px;
    color:#333;
    text-align:justify;
}
.chapter-page .chapter-growthstart-dialog .g-mask {
    z-index:1;
}
.chapter-page .chapter-growthstart-dialog .dialog {
    z-index:1;
}
.chapter-page .growthstar-online-time {
    position:absolute;
    top:25px;
    left:13px;
}
.chapter-page .growthstar-online-time .star {
    width:28px;
    position:absolute;
    z-index:1;
}
.chapter-page .growthstar-online-time .star.anim {
    -webkit-animation:swing 1s 2.2s 1;
    animation:swing 1s 2.2s 1;
}
.chapter-page .growthstar-online-time .star img {
    width:100%;
}
.chapter-page .growthstar-online-time .time-bar {
    position:absolute;
    width:53px;
    height:17px;
    background:#ffb902;
    font-size:12px;
    color:#fff;
    line-height:17px;
    border-radius:17px;
    top:4px;
    left:13px;
    text-align:right;
    padding-right:0.5em;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:end;
    -webkit-justify-content:flex-end;
    -ms-flex-pack:end;
    justify-content:flex-end;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
}
.chapter-page .growthstar-online-time .time-bar.anim {
    -webkit-animation:time-bar 1s 2s 1 forwards;
    animation:time-bar 1s 2s 1 forwards;
}
.chapter-page .growthstar-online-time .add-star {
    position:absolute;
    color:#FE5164;
    top:5px;
    left:4px;
    opacity:0;
}
.chapter-page .growthstar-online-time .add-star.anim {
    -webkit-animation:add-star 3s 1 forwards;
    animation:add-star 3s 1 forwards;
}
.chapter-page .growthstar-online-time .add-star img {
    width:20px;
}
.chapter-page .growthstar-online-time .add-star p {
    position:absolute;
    line-height:14px;
    margin-left:7px;
    width:78px;
    font-size:12px;
    top:2px;
    left:7px;
}
@-webkit-keyframes add-star {
    0% {
        -webkit-transform:translate3d(0, 0, 0);
        -ms-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0);
        opacity:0;
    }
    50% {
        -webkit-transform:translate3d(0, -25px, 0);
        -ms-transform:translate3d(0, -25px, 0);
        transform:translate3d(0, -25px, 0);
        opacity:1;
    }
    90% {
        -webkit-transform:translate3d(0, -25px, 0);
        -ms-transform:translate3d(0, -25px, 0);
        transform:translate3d(0, -25px, 0);
        opacity:1;
    }
    100% {
        -webkit-transform:translate3d(0, -25px, 0);
        -ms-transform:translate3d(0, -25px, 0);
        transform:translate3d(0, -25px, 0);
        opacity:0;
    }
}
@keyframes add-star {
    0% {
        -webkit-transform:translate3d(0, 0, 0);
        -ms-transform:translate3d(0, 0, 0);
        transform:translate3d(0, 0, 0);
        opacity:0;
    }
    50% {
        -webkit-transform:translate3d(0, -25px, 0);
        -ms-transform:translate3d(0, -25px, 0);
        transform:translate3d(0, -25px, 0);
        opacity:1;
    }
    90% {
        -webkit-transform:translate3d(0, -25px, 0);
        -ms-transform:translate3d(0, -25px, 0);
        transform:translate3d(0, -25px, 0);
        opacity:1;
    }
    100% {
        -webkit-transform:translate3d(0, -25px, 0);
        -ms-transform:translate3d(0, -25px, 0);
        transform:translate3d(0, -25px, 0);
        opacity:0;
    }
}
@-webkit-keyframes time-bar {
    0% {
        opacity:1;
    }
    100% {
        opacity:0;
        width:0;
    }
}
@keyframes time-bar {
    0% {
        opacity:1;
    }
    100% {
        opacity:0;
        width:0;
    }
}
      .g-action-sheel {
        font-size: 16px;
        z-index: 3;
        position: fixed;
      }
      .g-action-sheel .content{
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
        position: fixed;
        bottom: 100%;
        zIndex: 1;
        background: #fff;
        width: 100%;
        bottom: 0;
        max-width: 480px;
        margin: auto;
        left: 0;
        right: 0;
      }
      .g-action-sheel .content.show{
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }
      .g-action-sheel .as-item {
        height: 60px;
        border-bottom: 1px solid #f0f0f0;
      }
      .g-action-sheel .as-item:last-child {
        border: none;
        color: #9B9B9B;
      }
      .g-action-sheel .as-item:active {
        background: #eee;
      }
.read-page {
    min-height:100vh;
    padding-bottom:60px;
}
.read-page .block {
    background:#fff;
    margin:13px 10px;
    border-radius:10px;
    padding:23px 0;
    box-shadow:0 2px 8px 2px #e8e8e8;
    position:relative;
}
.read-page .center-ad img {
    padding:0px 4px;
    width:100%;
}
.read-page .dir-wrap .dir {
    background:#fff;
    position:fixed;
    height:100%;
    top:0;
    width:80%;
    padding:50px 15px;
    -webkit-transition:all 0.5s;
    transition:all 0.5s;
    text-align:left;
    overflow:auto;
    z-index:1;
}
.read-page .dir-wrap .dir.up {
    left:0;
}
.read-page .dir-wrap .dir.down {
    left:-100%;
}
.read-page .dir-wrap .dir .dir-title {
    font-size:18px;
    line-height:18px;
    padding-left:1em;
    margin-bottom:20px;
}
.read-page .dir-wrap .dir .dir-title::before {
    height:18px;
}
.read-page .dir-wrap .dir .to-books a {
    color:#999;
    font-size:16px;
    line-height:20px;
    -webkit-text-decoration:none;
    text-decoration:none;
}
.read-page .dir-wrap .dir .book-item .book-name, .read-page .dir-wrap .dir .book-item .chapter-item {
    padding:20px 0;
    border-bottom:1px solid #f0f0f0;
    position:relative;
    font-size:16px;
}
.read-page .dir-wrap .dir .book-item .book-name.granted, .read-page .dir-wrap .dir .book-item .chapter-item.granted {
    color:#333;
}
.read-page .dir-wrap .dir .book-item .book-name.un-granted, .read-page .dir-wrap .dir .book-item .chapter-item.un-granted {
    color:#ddd;
}
.read-page .dir-wrap .dir .book-item .book-name {
    font-size:18px;
    font-weight:bold;
}
.read-page .dir-wrap .dir .book-item .chapter-item {
    padding:0;
    padding-right:25px;
    height:66px;
}
.read-page .dir-wrap .dir .book-item .chapter-item p {
    position:relative;
    display:inline-block;
}
.read-page .dir-wrap .dir .book-item .chapter-item::after {
    content:' ';
    right:0;
    top:50%;
    margin:auto;
    -webkit-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
    position:absolute;
    width:20px;
    height:20px;
    background-repeat:no-repeat;
    background-size:contain;
}
.read-page .dir-wrap .dir .book-item .chapter-item.granted {
    color:#333;
}
.read-page .dir-wrap .dir .book-item .chapter-item.granted::after {
    background-image:url({RES}img/palyit.png);
}
.read-page .dir-wrap .dir .book-item .chapter-item.active {
    color:#fe5164 !important;
}
.read-page .dir-wrap .dir .book-item .chapter-item.active::after {
    background-image:url({RES}img/playit1.png);
}
.read-page .dir-wrap .dir .book-item .chapter-item.un-readed {
    color:#333;
}
.read-page .dir-wrap .dir .book-item .chapter-item.un-readed p::after {
    content:' ';
    position:absolute;
    width:6px;
    height:6px;
    background:rgba(254, 107, 105, 1);
    border-radius:100%;
    right:-14px;
    top:-2px;
}
.read-page .dir-wrap .dir .book-item .chapter-item.un-granted {
    color:#ddd;
}
.read-page .dir-wrap .dir .book-item .chapter-item.un-granted::after {
    background-image:url({RES}img/suo.png);
}
.read-page .read-note {
    font-size:0.19rem;
    font-weight:bold;
    color:#4a4a4a;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
    -webkit-align-items:center;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
}
.read-page .share-content {
    width:70%;
}
.read-page .desc-wrap .down-btn {
    text-align:center;
    width:100%;
    height:50px;
    padding-top:20px;
}
.read-page .desc-wrap .down-btn img {
    width:25px;
}
.read-page .desc-wrap .desc {
    width:100%;
    text-align:left;
    -webkit-transition:all 0.5s;
    transition:all 0.5s;
    position:fixed;
    background:#fff;
    border-radius:20px;
    max-width:480px;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    height:90%;
    overflow:hidden;
    padding-top:0;
    z-index:1;
}
.read-page .desc-wrap .desc h1 {
    font-size:20px;
    padding:0 20px;
}
.read-page .desc-wrap .desc.up {
    bottom:0;
}
.read-page .desc-wrap .desc.down {
    bottom:-100%;
}
.read-page .desc-wrap .desc .content {
    height:calc(100% - 50px);
    overflow:auto;
}
.read-page .desc-wrap .desc .content pre {
    padding:15px 30px;
    font-size:18px;
    line-height:2.2;
    text-align:justify;
}
.read-page .desc {
    text-align:left;
    padding-top:30px;
}
.read-page .desc pre {
    padding:15px;
    font-size:18px;
    line-height:2;
    text-align:justify;
}
.read-page .progress-wrap {
    position:relative;
    width:270px;
    height:20px;
}
.read-page .progress-total, .read-page .progress-current {
    position:absolute;
    width:100%;
    height:2px;
    background:#ddd;
    left:0;
    top:7.5px;
    border-radius:6px;
}
.read-page .progress-current {
    background:-webkit-linear-gradient(left, #fe956f, #fe5064);
    width:0;
}
.read-page .control-btn {
    width:270px;
    height:65px;
}
.read-page .control-btn .audio-btn {
    width:70px;
}
.read-page .control-btn #play-btn, .read-page .control-btn #pause-btn, .read-page .control-btn .play-btn, .read-page .control-btn .pause-btn {
    top:23px;
    left:4px;
    width:15px;
}
.read-page .control-btn #pause-btn, .read-page .control-btn .pause-btn {
    top:23px;
    left:0px;
}
.read-page .control-btn .next-btn, .read-page .control-btn .pre-btn {
    width:22px;
    top:23px;
    right:62px;
}
.read-page .control-btn .pre-btn {
    left:62px;
    right:auto;
}
.read-page .control-btn .dir-btn {
    width:22px;
    left:0;
    top:22px;
}
.read-page .control-btn .text-btn {
    width:21px;
    right:0;
    top:22px;
}
.read-page .time {
    color:#999;
    font-size:12px;
    width:270px;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
    -ms-flex-pack:justify;
    justify-content:space-between;
    padding-top:10px;
    margin-bottom:5px;
}
.read-page .title {
    width:270px;
    min-height:24px;
    line-height:24px;
}
.read-page .point {
    width:15px;
    height:15px;
    border-radius:100%;
    background:#fff;
    position:absolute;
    top:1px;
    left:-7.5px;
    touch-action:none;
    border:2px solid #fe6a68;
}
.read-page .header {
    min-height:190px;
}
.read-page .header img, .read-page .header .cover-placeholder {
    width:120px;
    object-fit:cover;
    background:#f0f0f0;
    box-shadow:0 1px 8px 1px #f0f0f0;
}
.read-page .author {
    height:19px;
    color:#666;
    font-size:14px;
    line-height:14px;
    margin-top:6px;
}
.read-page .schedule .schedule-bar {
    position:fixed;
    background:#ff000d;
    color:#fff;
    -webkit-letter-spacing:1px;
    -moz-letter-spacing:1px;
    -ms-letter-spacing:1px;
    letter-spacing:1px;
    font-size:12px;
    height:32px;
    padding-left:10px;
    border-top-left-radius:16px;
    border-bottom-left-radius:16px;
    box-shadow:1px 2px 17px 0px rgba(255, 0, 22, 0.2);
    right:-47px;
    z-index:1;
    width:135px;
    -webkit-animation:read-page-schedule 1s 1s 1;
    animation:read-page-schedule 1s 1s 1;
}
transition all 1s .read-page .schedule .schedule-bar.cannot-schedule {
    -webkit-animation:read-page-cannot-schedule 1s 1s 1;
    animation:read-page-cannot-schedule 1s 1s 1;
    right:-40px;
    width:165px;
}
.read-page .schedule .schedule-bar.can-schedule::after {
    content:'';
    position:absolute;
    width:4px;
    height:4px;
    background:#fff;
    left:77px;
    top:10px;
    border-radius:100%;
}
.read-page .schedule-gif {
    position:fixed;
    width:100%;
    top:0;
    max-width:480px;
    left:0;
    right:0;
    margin:auto;
    z-index:1;
}
.read-page .schedule-gif img {
    width:60px;
    position:absolute;
    right:15px;
    top:30px;
}
.read-page .loader {
    width:40px;
    position:absolute;
    left:0;
    right:0;
    margin:auto;
    top:12px;
}
@-webkit-keyframes sk-circleFadeDelay {
    .read-page 0%, .read-page 39%, .read-page 100% {
        opacity:0;
    }
    .read-page 40% {
        opacity:1;
    }
}
@-webkit-keyframes sk-circleFadeDelay {
    0%, 39%, 100% {
        opacity:0;
    }
    40% {
        opacity:1;
    }
}
@keyframes sk-circleFadeDelay {
    0%, 39%, 100% {
        opacity:0;
    }
    40% {
        opacity:1;
    }
}
@-webkit-keyframes read-page-schedule {
    0% {
        -webkit-transform:translateX(0);
        -ms-transform:translateX(0);
        transform:translateX(0);
    }
    50% {
        -webkit-transform:translateX(-40px);
        -ms-transform:translateX(-40px);
        transform:translateX(-40px);
    }
    100% {
        -webkit-transform:translateX(0px);
        -ms-transform:translateX(0px);
        transform:translateX(0px);
    }
}
@keyframes read-page-schedule {
    0% {
        -webkit-transform:translateX(0);
        -ms-transform:translateX(0);
        transform:translateX(0);
    }
    50% {
        -webkit-transform:translateX(-40px);
        -ms-transform:translateX(-40px);
        transform:translateX(-40px);
    }
    100% {
        -webkit-transform:translateX(0px);
        -ms-transform:translateX(0px);
        transform:translateX(0px);
    }
}
@-webkit-keyframes read-page-cannot-schedule {
    0% {
        -webkit-transform:translateX(0);
        -ms-transform:translateX(0);
        transform:translateX(0);
    }
    50% {
        -webkit-transform:translateX(-30px);
        -ms-transform:translateX(-30px);
        transform:translateX(-30px);
    }
    100% {
        -webkit-transform:translateX(0px);
        -ms-transform:translateX(0px);
        transform:translateX(0px);
    }
}
@keyframes read-page-cannot-schedule {
    0% {
        -webkit-transform:translateX(0);
        -ms-transform:translateX(0);
        transform:translateX(0);
    }
    50% {
        -webkit-transform:translateX(-30px);
        -ms-transform:translateX(-30px);
        transform:translateX(-30px);
    }
    100% {
        -webkit-transform:translateX(0px);
        -ms-transform:translateX(0px);
        transform:translateX(0px);
    }
}
.g-audio-bar .loader {
    width:20px;
    position:absolute;
    left:16px;
    margin:0;
    top:15px;
}
.g-audio-bar .loader .sk-fading-circle {
    width:20px;
    height:20px;
}
@-webkit-keyframes show-like {
    0% {
        -webkit-transform:scale(.8);
        -ms-transform:scale(.8);
        transform:scale(.8);
        opacity:.8;
    }
    20% {
        -webkit-transform:scale(.9);
        -ms-transform:scale(.9);
        transform:scale(.9);
        opacity:.9;
    }
    40% {
        -webkit-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1);
        opacity:1;
    }
    60% {
        -webkit-transform:rotate(-30deg);
        -ms-transform:rotate(-30deg);
        transform:rotate(-30deg);
    }
    70% {
        -webkit-transform:rotate(0);
        -ms-transform:rotate(0);
        transform:rotate(0);
    }
    80% {
        -webkit-transform:rotate(30deg);
        -ms-transform:rotate(30deg);
        transform:rotate(30deg);
    }
    90% {
        -webkit-transform:rotate(0);
        -ms-transform:rotate(0);
        transform:rotate(0);
    }
}
@keyframes show-like {
    0% {
        -webkit-transform:scale(.8);
        -ms-transform:scale(.8);
        transform:scale(.8);
        opacity:.8;
    }
    20% {
        -webkit-transform:scale(.9);
        -ms-transform:scale(.9);
        transform:scale(.9);
        opacity:.9;
    }
    40% {
        -webkit-transform:scale(1);
        -ms-transform:scale(1);
        transform:scale(1);
        opacity:1;
    }
    60% {
        -webkit-transform:rotate(-30deg);
        -ms-transform:rotate(-30deg);
        transform:rotate(-30deg);
    }
    70% {
        -webkit-transform:rotate(0);
        -ms-transform:rotate(0);
        transform:rotate(0);
    }
    80% {
        -webkit-transform:rotate(30deg);
        -ms-transform:rotate(30deg);
        transform:rotate(30deg);
    }
    90% {
        -webkit-transform:rotate(0);
        -ms-transform:rotate(0);
        transform:rotate(0);
    }
}
.read-note-list-wrap .show-like {
    -webkit-animation:show-like 1000ms 1 both;
    animation:show-like 1000ms 1 both;
}
.read-note-list-wrap .comment-bottom {
    font-size:14px;
}
.read-note-list-wrap .like {
    right:40px;
}
.read-note-list-wrap .like img {
    margin-right:6px;
}
@media (max-width :350px) {
    .read-note-list-wrap .comment-bottom {
        font-size:12px;
    }
    .read-note-list-wrap .like {
        right:30px;
    }
    .read-note-list-wrap .like img {
        margin-right:0;
    }
}
</style>
<div class="chapter-page" style="">
    <div class="read-page g-text-center g-page">
    	{if $chapter['type']==1}
        <video id="course_video" controls="controls" height="220px" width="100%" poster="{php echo toimage($book['thumb'])}" autoplay="autoplay">
			<source src="{php echo tomedia($chapter['link'])}" type="video/mp4" />
		</video>
    	{else}
        <audio id="course_audio" src="{php echo tomedia($chapter['link'])}" preload="auto"></audio>
        {/if}
        {if !empty($cfg['adv']['listen'])}
        <div>
            <div class="">
                <a href="{$cfg['adv']['listen_url']}">
                    <img src="{php echo toimage($cfg['adv']['listen'])}" alt="" style="width: 100%;">
                </a>
            </div>
        </div>
        {/if}
        <div class="block">
            {if $chapter['type']==0}
            <a href="javascript:;" class="header g-text-center g-margin-b" style="display: block;">
                <img id="book_logo" class="anm-fade-in g-push-in" src="" alt="">
            </a>
            <div id="book_title" class="title g-font-18 g-margin-b g-center-block" style="margin-bottom: 3px;">{$chapter['title']}</div>
            <div id="book_author" class="author" style="margin-bottom: 30px;"></div>
            <div class="progress-wrap g-center-block">
                <div class="progress-total"></div>
                <div id="point-width" class="progress-current" style="width: 0%;"></div>
                <a class="point" id="point-point" style="left: 0px;"></a>
            </div>
            <div class="time g-center-block section">
                <div id="current-time">00:00</div>
                <div id="total-time">00:00</div>
            </div>
            {else}
            <div id="book_title" class="title g-font-18 g-margin-b g-center-block" style="margin-bottom: 3px;width: 100%;">{$chapter['title']}</div>
            <div id="book_author" class="author" style="margin-bottom: 30px;"></div>
            {/if}
            <div class="control-btn g-text-center section g-center-block g-rlt">
                {if $chapter['type']==0}
                <a id="switch-btn" href="javascript:;" class="g-center-block g-push" style="width: 70px;">
                    <img class="audio-btn" src="{RES}img/circle.png" alt="">
                    <img id="play-pic" class="g-center-abs play-btn g-hidden" src="{RES}img/stops.png" alt="播放">
                    <img id="stop-pic" class="g-center-abs pause-btn" src="{RES}img/plays.png" alt="暂停">
                </a>
                {/if}
                <a class="g-push" onclick="showMore()" style="display: inherit;">
                    <div>
                        <img src="{RES}img/more.png" id="operation-img" class="dir-btn g-abs" alt="更多">
                        <p id="operation-text" style="position: absolute; font-size: 11px; color: rgb(106, 127, 165); top: 50px; left: 1px;">目录</p>
                        <div class="">
                            <div style="width: 6px; height: 6px; background: rgb(254, 107, 105); border-radius: 100%; position: absolute; left: 26px; top: 15px;"></div>
                        </div>
                    </div>
                </a>
                <a class="g-push" onclick="showDetail()" style="display: inherit;">
                    <img id="desc-img" src="{RES}img/txt.png" class="text-btn g-abs" alt="文稿">
                    <p id="operation-text" style="position: absolute; font-size: 11px; color: rgb(106, 127, 165); top: 50px; right: 0px;">文稿</p>
                </a>
                <div class="loader chapter-loader g-hidden">
                    <div class="sk-fading-circle">
                        <div class="sk-circle1 sk-circle"></div>
                        <div class="sk-circle2 sk-circle"></div>
                        <div class="sk-circle3 sk-circle"></div>
                        <div class="sk-circle4 sk-circle"></div>
                        <div class="sk-circle5 sk-circle"></div>
                        <div class="sk-circle6 sk-circle"></div>
                        <div class="sk-circle7 sk-circle"></div>
                        <div class="sk-circle8 sk-circle"></div>
                        <div class="sk-circle9 sk-circle"></div>
                        <div class="sk-circle10 sk-circle"></div>
                        <div class="sk-circle11 sk-circle"></div>
                        <div class="sk-circle12 sk-circle"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="center-ad"></div>
        <div>
            <div class="schedule g-fixed g-img-full"><a href="{php echo $this->murl('bremark')}" class="schedule-bar can-schedule g-flex col-center" id="schedule-img" style="z-index: 1; top: {if $chapter['type']==0}85{else}245{/if}px;">打卡得学分</a>
            </div>
            {if $cfg['commission']['status']>0}
            <div class="schedule g-fixed g-img-full"><a href="{php echo $this->murl('commission')}" class="schedule-bar can-schedule g-flex col-center" style="z-index: 1; top: {if $chapter['type']==0}150{else}300{/if}px;">分享赚佣金</a>
            </div>
            {/if}
        </div>
        <div>
            <div class="desc-wrap" id="chapter-detail" style="display: none;">
                <div class="">
                    <div onclick="hideDetail()" class="g-mask" style="z-index: 1;"></div>
                </div>
                <div class="desc g-smooth-scroll" style="bottom:0px;">
                    <div onclick="hideDetail()" class="down-btn g-push">
                        <img src="{RES}img/down.png" alt="">
                    </div>
                    <div class="content g-smooth-scroll" style="padding: 20px;">
                    	{$chapter['detail']}
                        <h1 class="g-text-center"></h1>
                    </div>
                </div>
            </div>
        </div>
        <div class="dir-wrap" style="display:none;">
            <div class="" style="display: inherit;">
                <div class="g-mask" onclick="hideMore()" style="z-index: 1;"></div>
            </div>
            <div class="dir g-smooth-scroll up">
                <div class="g-flex row-between">
                    <div class="dir-title g-sm-bar">目录</div>
                    <div class="to-books g-push"><a href="{php echo $this->murl('index')}">全部课程 ></a>
                    </div>
                </div>
                <div class="dir-list">
                </div>
            </div>
            <div class="g-modal  g-hidden">
                <div class="g-mask"></div>
                <div class="dialog">
                    <div class="content">
                        <div class="modal-body g-img-full" style="padding-bottom: 0px;">
                            <div class="g-font-16 g-margin-b">加入听书计划，即可收听此课程</div>
                        </div>
                    </div>
                    <div class="g-modal-footer"><a class="g-modal-btn" href="javascript:;">取消</a><a class="g-modal-btn active" href="javascript:;">立即报名</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="read-note-list-wrap" style="padding: 30px 20px; margin: 0px 0px 10px; background-color: rgb(255, 255, 255);">
            <div class="read-note">
                <p>精选学习笔记<span id="total_note" style="color: rgb(155, 155, 155); font-size: 0.14rem; font-weight: normal; display: inline-block;"></span>
                </p>
                <button onclick="goSubNote()" class="g-button read-note-comment-btn" style="width: 117px; height: 40px; font-size: 14px; line-height: 40px; display: block;">发表学习笔记</button>
            </div>
            
            <div id="note-bottom" class="g-infinite-scroll g-text-center" style="padding: 15px 0px;"></div>
            <div class="" style="display: none;">
                <div class="g-flex row-center col-center" style="position: fixed; top: 0px; width: 100%; height: 100%; left: 0px;">
                    <img src="{RES}img/zan1.png" class="" style="width: 65px;">
                </div>
            </div>
            <div class="g-modal  g-hidden">
                <div class="g-mask"></div>
                <div class="dialog">
                    <div class="content">
                        <div class="modal-body">
                            <p>确定删除学习笔记?</p>
                        </div>
                    </div>
                    <div class="g-modal-footer"><a class="g-modal-btn grey" href="javascript:;">取消</a><a class="g-modal-btn active" href="javascript:;">确定</a>
                    </div>
                </div>
            </div>
            <audio src="" preload="metadata"></audio>
        </div>
        <div class="g-modal  g-hidden">
            <div class="g-mask"></div>
            <div class="dialog">
                <div class="content">
                    <div class="modal-body">
                        <p style="font-size: 0.14rem;">本节课程已结束，每日坚持打卡，毕业那天全额返还学费</p>
                    </div>
                </div>
                <div class="g-modal-footer"><a class="g-modal-btn grey" href="javascript:;">取消</a><a class="g-modal-btn active" href="javascript:;">立即打卡</a>
                </div>
            </div>
        </div>
        <div class="g-modal  g-hidden">
            <div class="g-mask"></div>
            <div class="dialog">
                <div class="content">
                    <div class="modal-body">
                        <p>好学你的不知不觉已经听了3分钟的课程，是否对课程内容感兴趣呢？取消退款可以继续加入学习计划，让我们见证你的成长</p>
                    </div>
                </div>
                <div class="g-modal-footer"><a class="g-modal-btn" href="javascript:;">再学学看</a><a class="g-modal-btn active" href="javascript:;">取消退款</a>
                </div>
            </div>
        </div>
        <div class="g-action-sheel">
            <div class="g-mask" style="display: none;"></div>
            <div class="content"><a class="as-item g-flex col-center row-center">回听课程</a><a class="as-item g-flex col-center row-center"><span>后台播放<span style="display: inline-block; width: 50px; height: 20px; background-color: rgb(254, 107, 105); font-size: 14px; color: rgb(255, 255, 255); text-align: center; border-radius: 14px; line-height: 20px; margin-left: 12px; margin-top: -1px;">NEW</span></span></a>
                <a
                class="as-item g-flex col-center row-center">取消</a>
            </div>
        </div>
    </div>
    <div class="g-modal  g-hidden">
        <div class="g-mask"></div>
        <div class="dialog">
            <div class="content">
                <div class="modal-body">
                    <img src="{RES}img/bremark_fail.png" alt="" style="width: 121px; height: 75.88px; margin-bottom: 17px;">
                    <p style="font-size: 0.18rem; margin-left: 1em;">打卡失败！</p>
                    <p class="g-color-grey" style="font-size: 0.14rem; padding-top: 0.05rem;">如需打卡请前往打卡页面</p>
                </div>
            </div>
            <div class="g-modal-footer"><a class="g-modal-btn grey" href="javascript:;">取消</a><a class="g-modal-btn active" href="javascript:;">立即打卡</a>
            </div>
        </div>
    </div>
</div>
</div>
{template 'loading'}
<script>
var has_bremark = 0;
var mem_book_id = getCookie('mem_book');
var chapterid = '{$_GPC["cid"]}';
var page = 1;
//下拉加载
var range = -50; //距下边界长度/单位px
var totalheight = 0;
var loading = false;
$(window).scroll(function(){
	if(loading) return false;
  var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度)
  totalheight = parseFloat($('body').height()) + parseFloat(srollPos);
  if(($("body").height()-range) <= totalheight) {
  	if(loading) return false;
  	page++;
  	getList();
  }            
});
function getList(){
	if(loading) return false;
	loading = true;
	$.ajax({
		url:'{php echo $this->murl("blisten",["cid"=>$_GPC["cid"]])}',
		data: {page:page, bid: mem_book_id, op:'scroll'},
		type: "post",
		success: function(dat){
			dat = JSON.parse(dat);
			if(dat.code==1){
				dat = dat.list;
				var str = '';
				for(var i in dat){
					
		        	str += '<div style="display: flex; position: relative; text-align: left; padding: 24px 0px; border-bottom: 1px solid rgb(238, 238, 238);">';
		        	str += '<div style="width: 40px; height: 40px; background-image: url('+dat[i].avatar+'); background-size: cover; background-position: 50% 50%; margin-right: 20px; border-radius: 20px; flex-shrink: 0; position: relative;"></div>';
		        	str += '<div style="color: rgb(74, 74, 74); width: calc(100% - 40px);">';
		        	str += '<p class="g-text-cut" style="font-size: 15px; font-weight: bold; margin-bottom: 6px;">'+dat[i].nickname+'</p><pre style="margin-bottom: 14px; letter-spacing: 1px;">'+dat[i].content+'</pre>';
		        	str += '<div class="g-margin-b">';
		        	str += '<audio src="" preload="metadata"></audio>';
		        	str += '</div>';
		        	str += '<div class="g-flex col-center comment-bottom"><span style="color: rgb(155, 155, 155);">'+dat[i].createtime+'</span>';
		        	str += '<a onclick="doLike(this,'+dat[i].id+')" class="like " style="position: absolute; color: rgb(155, 155, 155);">';
		        	str += '<img src="{RES}img/zan'+dat[i].has+'.png" class="" style="width: 16px; vertical-align: text-top;"><span style="color: rgb(254, 81, 100);">'+dat[i].total+'</span>';
		        	str += '</a><a href="'+dat[i].url+'" style="position: absolute; right: 0px; color: rgb(155, 155, 155);">分享</a>';
		        	str += '</div>';
		        	str += '</div>';
		        	str += '</div>';
					
				}
				$('#note-bottom').before(str);
				loading = false;
			}
			else{
				if(page==1) console.log('暂无评论')
				loading = true;
			}
		}	
	});	
}
function doLike(obj, id){
	$.ajax({
		url:'{php echo $this->murl("blisten",["cid"=>$_GPC["cid"]])}',
		data: {nid:id,op: 'like', bid: mem_book_id},
		type: "post",
		success: function(dat){
			var total = $(obj).find('span').text();
			if(dat==1){
				$(obj).find('img').attr('src',"{RES}img/zan1.png");
				total = parseInt(total) + 1;
				$(obj).find('span').text(total);
			}
			else{
				$(obj).find('img').attr('src',"{RES}img/zan.png");
				total = parseInt(total) - 1;
				if(total<=0) total = 0;
				$(obj).find('span').text(total);
			}
		}
	});	
}
function getInfo(){
	$.ajax({
		url:'{php echo $this->murl("blisten",["cid"=>$_GPC["cid"]])}',
		data: {bid: mem_book_id},
		type: "post",
		success: function(dat){
			dat = JSON.parse(dat);
			if(dat.code==1){
				getList();
				$('#book_logo').attr('src',dat.book.cover);
				if(dat.book.author && dat.book.author!='') var author = dat.book.author;
				else var author = '佚名'
				$('#book_author').text('导师：'+author);
				document.title = dat.book.title;
				$('.book-name').text(dat.book.title);
				$('#total_note').text('（'+dat.total_note+'）');
				
				has_bremark = dat.has_bremark;
				{if $cfg['bremark_type']==0}
				if(has_bremark == 0) culBremarkTime();
				{/if}
				var directory = dat.directory;
				var str = '';
				for(var i in directory){
					str += '<div class="book-item">';
					str += '<div class="book-name granted">'+directory[i].dir.title+'</div>';
						var chapter = directory[i].chap;
						for(var j in chapter){
							var isact = '',granted='granted';
							if(chapterid==chapter[j].id) isact = 'active';
							chapter[j].url = "javascript: void(0);";
							if(chapter[j].lock==1){
								granted = 'un-granted';
							}else{
								if(chapter[j].type == 'question') chapter[j].url = "{php echo $this->murl('bexam')}&did="+chapter[j].did;
								else if(chapter[j].type == 'exam') chapter[j].url = "{php echo $this->murl('bresult')}&did="+chapter[j].did;
								else chapter[j].url = "{php echo $this->murl('blisten')}&cid="+chapter[j].id;
							}
							str += '<a href="'+chapter[j].url+'" class="chapter-item g-push g-flex col-center '+granted+' '+isact+'">';
							str += '<p class="">'+chapter[j].title+'</p>';
							str += '</a>';
						}
					str += '</div>';
				}
				$('.dir-list').append(str);
			}
			else{
				return;
				msgTip(dat.msg,function(){
					location.href='{php echo $this->murl("index")}'
				})
			}
		}	
	});
}
function showMore(){
	$('.dir-wrap').show();
}
function hideMore(){
	$('.dir-wrap').hide();
}
function showDetail(){
	$('#chapter-detail').show();
}
function hideDetail(){
	$('#chapter-detail').hide();
}
function goSubNote(){
	var cid = '{$_GPC["cid"]}'
	location.href='{php echo $this->murl("notesubmit")}&cid='+cid
}
var times = "{$chapter['times']}";
var cur_min = 0;
var cur_sec = 0;
var playTime;
var cur_total = 0;
var audio;
var video;
var total_time = 0;
var current_time = 0;
$(function(){
	getInfo();
})
var dummy_bremark_time = 1000;
{if $chapter['type']==0}
document.addEventListener('DOMContentLoaded', function() {
	audioAutoPlay('course_audio');
});
function audioAutoPlay(obj) {
	var audio = document.getElementById(obj);
	document.addEventListener("WeixinJSBridgeReady", function() {
		audio.play();
		audio.pause();
	}, false);
}
function secondToMin(s){
	var M = Math.floor(s/60);
	var S = s%60;
	if(M<10){
		M = '0' + M;
	}
	if(S<10){
		S = '0' + S;
	}
	var min = M + ':' + S;
	return min.split('.')[0];
}
audio = document.getElementById('course_audio');
$(audio).on('loadedmetadata',function(){
	total_time = audio.duration;
	dummy_bremark_time = total_time;
	$('#total-time').text(secondToMin(audio.duration))
	$('#switch-btn').click(function(){
		if (audio.paused) { 
            audio.play(); 
            $('#play-pic').removeClass('g-hidden');
            $('#stop-pic').addClass('g-hidden');
            playTime = setInterval(function(){
            	if(audio.currentTime >= audio.duration){
                	clearInterval(playTime); 
                }
            	else{
            		$('#current-time').text(secondToMin(audio.currentTime))
	            	var time_rate = audio.currentTime / audio.duration;
	                $('.progress-current').css('width',(time_rate*100)+'%');
	                var left_width = 270 * time_rate;
	                $('.point').css('left',left_width+'px');
            	}
            },1000);
        }
		else{
	        audio.pause();
	        clearInterval(playTime); 
	        $('#stop-pic').removeClass('g-hidden');
	        $('#play-pic').addClass('g-hidden');
		}
	});
	
	var point = $('#point-point');
	var is_first = false;
	var start_x = 0;
	point.on({//绑定事件
        touchstart:function(e){
        	//开始拖曳
        	audio.pause();
        	$('#stop-pic').removeClass('g-hidden');
	        $('#play-pic').addClass('g-hidden');
            startX = e.originalEvent.targetTouches[0].pageX;    //获取点击点的X坐标 
            if(!is_first) start_x = startX;
            is_first = true;
        },
        touchmove:function(e){
        	//拖曳中
        	e.preventDefault();
            moveX=e.originalEvent.targetTouches[0].pageX;//移动过程中X轴的坐标
            moveX = parseFloat(moveX) - parseFloat(start_x);
            if(parseFloat(moveX) <= 0) moveX = 0;
            if(parseFloat(moveX) >= 270) moveX = 270;
            $('#point-point').css('left',moveX+'px');
            current_time = parseFloat(total_time) * parseFloat(moveX) / 270;
            var time_rate = parseFloat(current_time) / parseFloat(total_time);
            $('.progress-current').css('width',(time_rate*100)+'%');
            $('#current-time').text(secondToMin(current_time))
        },
        touchend:function(e){
        	//拖曳结束
        	audio.currentTime = current_time;
        	audio.play();
        	$('#play-pic').removeClass('g-hidden');
            $('#stop-pic').addClass('g-hidden');
            playTime = setInterval(function(){
            	if(audio.currentTime >= audio.duration){
                	clearInterval(playTime); 
                }
            	else{
            		$('#current-time').text(secondToMin(audio.currentTime))
	            	var time_rate = audio.currentTime / audio.duration;
	                $('.progress-current').css('width',(time_rate*100)+'%');
	                var left_width = 270 * time_rate;
	                $('.point').css('left',left_width+'px');
            	}
            },1000);
        }
	});   
})
{else}
var is_first_video = 0;
video = document.getElementById('course_video');
$(video).on('timeupdate',function(event){
	if(is_first_video<2) dummy_bremark_time = video.duration;
	is_first_video++;
})
{/if}
var bremarkTime;
function culBremarkTime(){
	var book_bremark_time = getCookie('bremark_time');
	if(!book_bremark_time) book_bremark_time = 0;
	bremarkTime = setInterval(function(){
    	if(book_bremark_time >= dummy_bremark_time){
        	clearInterval(bremarkTime); 
        	geBremark();
        }
    	else{
    		book_bremark_time = parseInt(book_bremark_time) + 1;
    		setCookie('bremark_time',book_bremark_time);
    	}
    },1000);
}
var bremark_time = 0;
function geBremark(){
	if(bremark_time==0){
		var time = new Date(); 
    	bremark_time = time / 1000;
	}
	$.ajax({
		url:'{php echo $this->murl("bremark")}',
		data: {id: mem_book_id, bremark_time: bremark_time, op: 'bremark'},
		type: "post",
		success: function(dat){
			dat = JSON.parse(dat);
			if(dat.code == 1){
				console.log('打卡成功');
			}
			else if(dat.code == 5){
				console.log('已打卡');
			}
			else if(dat.code == 4 || dat.code == 3 || dat.code == 2){
				console.log(dat.msg)
			}	
			else{
				console.log(dat.msg)
			}
		}
	});
}	

function nextGo(){
	audio.currentTime += 5;
	audio.play();
}
function backGo(){
	audio.currentTime -= 5;
	if(audio.currentTime>=0){
		
	}
	audio.play();
}
</script>
